<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
    <title>待办</title>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <link rel="stylesheet" href="//cdnhhmk.oss-cn-shenzhen.aliyuncs.com/libs/admin.index.css">
    <link rel="stylesheet" href="//cdnhhmk.oss-cn-shenzhen.aliyuncs.com/libs/admin.reset.css">
    <style>
            .font-color-blue {
                color: #1989FA;
            }
            .el-tabs__nav {
                margin-left: 130px;
            }
            .content-case {
                z-index: 2;
                margin-top: 9px;
                overflow: hidden;
            }
            .table-view {
                width: 1100px;
                margin-bottom: 30px;
            }
            .margin-horizontal {
                margin: 0px 10px;
            }
            .margin-horizontal-plus {
                margin: 0px 50px;
            }
            .subreport-title {
                font-size: 16px;
                line-height: 48px;
                display: flex;
                flex-direction: row;
                align-items: center;
                padding-left: 20px;
            }
            .element-center {
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .content-container {
                position: relative;
                width: 100%;
                overflow: hidden;
            }
            .content-container .tab-menu {
                padding: 0px 20px;
                background: #F5F7FA;
                position: absolute;
                height: 50px;
                right: 0px;
                left: 0px;
            }

            .content-container .tab-menu .tab-menu-ul .tab-menu-li:not(:first-child) {
                border-left: 1px solid #DCDFE6;
            }

            .content-container .tab-menu .title {
                font-size: 22px;
                color: #000000;
                line-height: 22px;
                margin-right: 20px;
            }

            .content-container .content-nav {
                background: #F5F7FA;
                height: 15px;
            }

            .content-container .operation-menu>div:not(:last-child) {
                border-bottom: 1px solid #DCDFE6;
            }

            .content-container .muti-table {
                background: #FFFFFF;
            }

            .content-container .muti-table .table-row {
                padding-left: 20px;
                border-bottom: solid 1px #e6e6e6;
                word-break: break-all;
            }

            .content-container .muti-table .table-row .muti-table__table-cell {
                padding: 0px 10px;
                box-sizing: border-box;
            }

            .content-container .muti-table .table-row__sep {
                padding-top: 8px;
                padding-bottom: 8px;
            }

            .content-container .muti-table .table-row__left .muti-table__table-cell {
                line-height: 100%
            }

            .content-container .muti-table .table-th {
                font-size: 14px;
                color: #909399;
                letter-spacing: 0;
                text-align: left;
                line-height: 16px;
                font-weight: bold;
                padding: 0px 0px 0px 20px;
            }

            .content-container .muti-table .content-row {
                font-size: 14px;
                color: #606266;
                letter-spacing: 0;
                text-align: left;
                line-height: 14px;
            }

            .content-container .muti-table .content-row:hover {
                background: #eeeeee;
            }

            .content-container .muti-table .table-row__left {
                min-width: 300px;
                /*width: 25%*/
            }

            .content-container .muti-table .table-row .user-id-cell {
                width: 80px;
                padding-left: 0px;
            }

            .content-container .muti-table .table-row .user-name-cell {
                width: 80px;
            }

            .content-container .muti-table .table-row .user-phone-cell {
                min-width: 80px;
            }

            .content-container .muti-table .table-row .user-operator-cell .el-button+.el-button {
                margin-top: 5px;
                margin-left: 0px
            }

            .content-container .muti-table .table-row .table-row__right {
                width: 460px;
            }

            .content-container .muti-table .table-row .order-desc-cell {
                min-width: 300px;
                line-height: normal;
            }

            .content-container .muti-table .table-row .experience-cell {
                width: 150px
            }

            .content-container .muti-table .table-row .todo-cell {
                margin: 8px;
            }

            .content-container .muti-table .table-row .order-operator-cell {
                width: 180px;
            }
            .todo-order-number {
                width: 100%;
                font-size: 14px;
                line-height: 16px;
                color: #7D7D7D;
                min-height: 48px;
                padding: 16px;
                box-sizing: border-box;
                word-wrap:break-word;
            }
            .remind-div {
                width: 100%;
                padding: 20px;
                box-sizing: border-box;
            }
            .remind-div .remind-case {
                background: #F4F4F5;
                border-radius: 4px;
                display: flex;
                flex-direction: row;
                padding: 10px;
                box-sizing: border-box;
            }
            .remind-div .remind-case .remind-icon {
            }
            .remind-div .remind-case .remind-content {
                margin-left: 10px;
                display: flex;
                flex-direction: column;
                font-size: 12px;
                line-height: 18px;
                color: #909399;
            }

        </style>
</head>

<body style="display: none;">
    <div id="app" class="container" flex>
        <el-admin-menu :user-detail="userDetail" :menus="menus" @logout="logout">
        <div class="content-container" flex-box=1 flex="dir:top">
            <div flex-box="0" class="tab-menu" flex="cross:center">
                <div class="title" flex-box=0>待办</div>
            </div>
            <div flex-box="1" class="content-case">
                <el-tabs v-model="activeName2" type="card" @tab-click="handleClick">
                    <el-tab-pane label="悦健康-天河店" name="first">
                        <div class="muti-table">
                            <div class="table-th table-row" flex>
                                <div class="table-row__sep" flex style="width: 100%;">
                                    <div flex-box="1" class="muti-table__table-cell todo-cell" style="flex: 25%;">基础费用</div>
                                    <div flex-box="1" class="muti-table__table-cell todo-cell" style="flex: 25%;">本月悦健康营收</div>
                                    <div flex-box="1" class="muti-table__table-cell todo-cell" style="flex: 25%;">本月悦健康代收</div>
                                    <div flex-box="1" class="muti-table__table-cell todo-cell" style="flex: 25%;">待转款</div>
                                </div>
                            </div>
                            <div class="content-row table-row" flex>
                                <div class="table-row__sep" flex style="width: 100%;">
                                    <div flex-box="1" class="muti-table__table-cell todo-cell font-color-blue" style="flex: 25%;">12333</div>
                                    <div flex-box="1" class="muti-table__table-cell todo-cell font-color-blue" style="flex: 25%;">5555</div>
                                    <div flex-box="1" class="muti-table__table-cell todo-cell font-color-blue" style="flex: 25%;">4444444</div>
                                    <div flex-box="1" class="muti-table__table-cell todo-cell font-color-blue" style="flex: 25%;">46666666</div>
                                </div>
                            </div>
                        </div>
                        <div class="todo-order-number">超过30天还没有到店的用户的订单：<span>23889409090390，</span><span>23889409090390，</span><span>23889409090390，</span><span>23889409090390，</span><span>23889409090390，</span><span>23889409090390，</span><span>23889409090390，</span><span>23889409090390，</span><span>23889409090390，</span><span>23889409090390，</span><span>23889409090390，</span><span>23889409090390，</span></div>
                        <div class="content-nav"></div>
                        <div class="remind-div">
                            <div class="remind-case">
                                <div class="el-icon-info remind-icon"></div>
                                <div class="remind-content">
                                    <span style="font-family: MicrosoftYaHeiUI-Bold;">以下为系统获取的用户到店信息，请及时确认！</span>
                                    <span style="font-family: MicrosoftYaHeiUILight;">用户扫描商家台卡二维码，系统会自动生成其到店信息，若到店时间与实际不符，可修改调整后再确认！</span>
                                </div>
                            </div>
                        </div>
                        <div class="muti-table">
                            <div class="table-th table-row" flex>
                                <div class="table-row__sep table-row__left " style="border-right: solid 1px #e6e6e6;" flex>
                                    <div flex-box="0" class="muti-table__table-cell user-id-cell" flex="cross:center">用户ID</div>
                                    <div flex-box="0" class="muti-table__table-cell user-name-cell" flex="cross:center">姓名</div>
                                    <div flex-box="1" class="muti-table__table-cell user-phone-cell" flex="cross:center">电话号码</div>
                                </div>
                                <div class="table-row__sep" flex-box="1" flex>
                                    <div flex-box="1" flex="cross:center" class="muti-table__table-cell title-grow-table-cell order-desc-cell">活动名称</div>
                                    <div flex-box="0" flex class="table-row__right">
                                        <div flex-box="0" class="muti-table__table-cell experience-cell" flex="cross:center">到店日期</div>
                                        <div flex-box="0" class="muti-table__table-cell order-operator-cell" flex="cross:center">操作</div>
                                    </div>

                                </div>
                            </div>

                            <div class="content-row table-row" flex v-for="item in tableData">
                                <div class="table-row__sep table-row__left" flex-box=0 style="border-right: solid 1px #e6e6e6;" flex>
                                    <div flex-box="0" class="muti-table__table-cell user-id-cell" flex="cross:center" v-text="item.id"></div>
                                    <div flex-box="0" class="muti-table__table-cell user-name-cell" flex="cross:center" v-text="item.name"></div>
                                    <div flex-box="1" flex="cross:center" class="muti-table__table-cell user-phone-cell" v-text="item.tel"></div>
                                </div>
                                <div class="table-row__sep" flex-box="1" style="padding-bottom: 0px;">
                                    <div style="border-bottom: solid 1px #e6e6e6; padding-bottom: 8px;padding-top: 8px;" flex v-for="el in item.activityItems">
                                        <div flex-box="1" flex="cross:center" class="muti-table__table-cell grow-table-cell order-desc-cell" v-text="el.activityName"></div>
                                        <div flex-box="0" flex class="table-row__right">
                                            <div flex-box="0" class="muti-table__table-cell experience-cell" flex="cross:center" v-text="el.date"></div>
                                            <div flex-box="0" class="muti-table__table-cell order-operator-cell" flex="cross:center">
                                                <el-button size="mini">没有到店</el-button>
                                                <el-button size="mini">确认到店</el-button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="悦健康-越秀店" name="second">
                        悦健康-越秀店
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>
        </el-admin-menu>
    </div>
</body>
<script src="common/config.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script>window.jQuery||document.write('<script src="//cdn.staticfile.org/jquery/3.1.1/jquery.min.js"><\/script>')</script>
<script src="testdata/test_data.js"></script>
<script src="//cdnhhmk.oss-cn-shenzhen.aliyuncs.com/libs/admin.index.js"></script>
<script src="//cdnhhmk.oss-cn-shenzhen.aliyuncs.com/libs/admin.comon.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function() {
            return {
                tableData: [{
                    id: '001',
                    name: '张三',
                    tel: '18688797562',
                    activityItems: [{
                        activityName: '金宝贝金宝贝金宝贝金宝贝金宝贝金宝贝金宝贝金宝贝金宝贝金宝贝',
                        date: '2018/05/21',
                    },{
                        activityName: '金宝贝金宝贝金宝贝金宝贝金宝bububububububajsdkjasdbhkjashdkahdsk',
                        date: '2018/05/21',
                    }]
                },{
                    id: '002',
                    name: '张三',
                    tel: '18688797562',
                    activityItems: [{
                        activityName: '金宝贝金宝贝金宝贝金宝贝金宝贝金宝贝金宝贝金宝贝金宝贝金宝贝',
                        date: '2018/05/21',
                    }]
                },],
                visible: false,
                activeName2: 'first',
                // 来自test_data.js
                menus: menus,
                // 来自test_data.js
                userDetail: userDetail
            }
        },
        methods: {
            logout() {
                window.location.href = 'login.html';
            },
            handleClick(){

            }
        },
        mounted() {
            document.querySelector('body').style.display = 'block';
        }
    });
</script>
</html>
